<template>
	<view class="u-p-30">
		<u-navbar title="购物车" placeholder bg-color="#f4f4f4">
			<view slot="left">
				<!-- #ifdef MP-WEIXIN -->
				<text class="u-f-28" v-if="type==0 && list.length > 0" @click="type=1">编辑</text>
				<text class="u-f-28" v-if="type==1" @click="type=0">完成</text>
					<!-- #endif -->
			</view>
			<view slot="right">
				<!-- #ifdef APP -->
				<text class="u-f-28" v-if="type==0 && list.length > 0" @click="type=1">编辑</text>
				<text class="u-f-28" v-if="type==1" @click="type=0">完成</text>
				<!-- #endif -->
			</view>
		</u-navbar>
		<view class="u-p-30" v-if="list.length<1">
			<view class="u-flex-xy-center u-m-t-50" style="flex-direction: column;">
				<!-- <image src="../../static/cartNone.png" style="width: 180rpx;height: 180rpx;"></image> -->
				<view class="u-m-t-30 u-f-28" style="color: #999;">目前还没有添加商品哦~</view>
				<u-gap height="90rpx"></u-gap>
				<view class="btn" @click="toIndex">去商城逛逛</view>
			</view>
		</view>
		<view class="u-bg-fff u-r-16 u-p-20 u-flex u-m-b-30" v-for="(item,index) in list" @click="$u.route('/pages/product/product?id='+item.shop_id)">
			<image  :src="item.checked==1?'../../static/checked.png':'../../static/check.png'" style="width: 36rpx;height: 36rpx;margin: 50rpx 10rpx 0 0;" @click.stop="changeCheck(item.id,item.checked,0)"></image>
			<image :src="item.image" style="width: 150rpx;height: 150rpx;border-radius: 16rpx;"></image>
			<view class="u-m-l-10 u-flex-1">
				<view class="u-f-30 u-bold u-line-1">{{item.name}}</view>
				<!-- <view class="u-f-26 u-m-t-6">
					已选：{{item.attr_name}}
				</view> -->
				<view class="u-flex-y-center u-flex-between u-m-t-16">
					<view style="color: #F10C0C;"><text class="u-f-26">￥</text><text class="u-f-36 u-bold">{{item.price}}</text>
					</view>
					<view class="u-flex-y-center">
						<u-number-box  :value="item.number" min="1" @change="(value)=>{valChange(value,index)}"></u-number-box>
						<!-- <image src="../../static/jian.png" style="width: 50rpx;height: 50rpx;"></image>
						<view class="numBox">1</view>
						<image src="../../static/jia.png" style="width: 50rpx;height: 50rpx;"></image> -->
					</view>
				</view>
				<u-gap height="20rpx"></u-gap>
				
			</view>
		</view>
		
		<u-gap height="108rpx"></u-gap>
		<view class="bottom" v-if="type==0">
			<view class="u-flex-y-center">
				<image :src="checked==1?'../../static/checked.png':'../../static/check.png'"   @click="changeCheck(0,checked,1)" style="width: 36rpx;height: 36rpx;"></image>
				<view class="u-f-28 u-m-l-10">全选</view>
			</view>
			<view class="u-flex-y-center">
				<view class="u-f-26 u-m-r-20" style="color: #999;">合计</view>
				<view style="color: #F10C0C;"><text class="u-f-26">￥</text><text class="u-f-36 u-bold">{{amount||0}}</text>
				</view>
				<view class="appBtn u-m-l-30" style="width: 210rpx;"  @click="navTo">结算</view>
			</view>
		</view>
		<view class="bottom" v-if="type==1">
			<view class="u-flex-y-center">
				<image :src="checked==1?'../../static/checked.png':'../../static/check.png'" @click="changeCheck(0,checked,1)" style="width: 36rpx;height: 36rpx;"></image>
				<view class="u-f-28 u-m-l-10">全选</view>
			</view>
			<view class="appBtn u-m-l-30" style="width: 210rpx;background:red;" @click="del">删除</view>
		</view>

	</view>
</template>

<script>
	
	export default {
		
		data() {
			return {
				type:0,
				showdel:false,
				list:[],
				amount:0,
				checked:0
			}
		},
		onLoad() {
			
		},
		onShow() {
			if (!uni.getStorageSync('token')) {
				uni.showModal({
					content: "请先登录",
					title: "提示",
					confirmText: "去登录",
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: "/pages/login/login"
							})
						} else {
						}
					}
				})
				return
			}
			this.getInfo()
		},
		methods: {
			toIndex(){
				uni.navigateTo({
					url:'/pages/shop/cate'
				})
			},
			navTo(){
				console.log(this.amount)
				if(this.amount <= 0){
					 return this.$u.toast('请选择商品');
				}
				uni.navigateTo({
					url:'/pages/order/orderCreated'
				})
			},
			async del(){
				let res= await uni.$u.http.post('shop/cartDelete');
				this.$u.toast('删除成功');
				this.showdel = false
				this.type = 0
				this.getInfo()
			},
			async changeCheck(id,checked,type){
				checked = checked == 1?0:1
				let res= await uni.$u.http.post('shop/cartChecked',{cart_id:id,checked:checked,type:type});
				this.getInfo()
			},
			async valChange(m,e){
				let info = this.list[e]
				let res= await uni.$u.http.post('shop/cartAdd',{shop_id:info.shop_id,number:m.value,attr_id:info.attr_id});
				this.getInfo()
			},
			async getInfo(){
				let res= await uni.$u.http.post('shop/cartList');
				console.log(res)
				this.list = res.list
				this.amount = res.amount
				this.checked = res.checked
			},
		}
	}
</script>

<style>
	page {
		background: #f4f4f4;
	}
	.bottom{
		width: 100%;
		height: 108rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		padding: 10rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.jia {
		width: 78rpx;
		height: 32rpx;
		background: linear-gradient(90deg, #FBDEC2 0%, #FEB282 100%);
		border-radius: 8rpx 0rpx 0rpx 8rpx;
		font-size: 22rpx;
		color: #56290A;
		padding-left: 5rpx;
	}

	.jia2 {
		padding-right:6rpx;
		color: #fff;
		font-size: 22rpx;
		height: 32rpx;
		background: #091E3D;
		border-radius: 0rpx 8rpx 8rpx 0rpx;
	}

	.yuan {
		width: 16rpx;
		height: 16rpx;
		background: #091E3D;
		margin-left: -6rpx;
		border-radius: 50%;
	}

	.numBox {
		min-width: 62rpx;
		height: 50rpx;
		background: #F4F4F4;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 0 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 2rpx;
		font-size: 28rpx;
	}

	.btn {
		width: 196rpx;
		height: 66rpx;
		background: #FFFFFF;
		border-radius: 33rpx 33rpx 33rpx 33rpx;
		border: 1rpx solid #707070;
		font-size: 28rpx;
		color: #999;
		text-align: center;
		line-height: 66rpx;
	}
</style>